<template>
  <div class="comFlashExchangeRadio_container pr-1 pl-1" v-if="visible">
		<div class="com_top_navBar">
			<van-nav-bar
				left-arrow
				@click-left="onClickLeft"
			>
			</van-nav-bar>
		</div>
		<div class="comFlashExchangeRadio_container_content">
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell v-for="(item , index) in showMap" :key="index" clickable @click="clickCell(item)">
						<template #right-icon>
							<van-radio :name="item.name" />
						</template>
						<template #title>
							<img :src="item.image" alt="">
							<span class="custom-title">{{ item.name }}</span>
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</div>
	</div>
</template>

<script>
export default {
	name: "ComFlashExchangeRadio",
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		consume:null,
		gain:null,
		selectType: {
			type: Number,
			default: 1 // 1.消耗币种，2.获得币种
		},
		coinsMap: {},

	},
	data(){
		return {
			radio:'',
			anotherRadio: '',
		}
	},
	mounted(){
		this.initRaito()
	},
	watch: {
		visible(newVal) {
			if (newVal) {
				this.initRaito()
			}
		}
	},

	computed: {
		showMap(){
			let arr = []
			for(let key in this.coinsMap){
				if(this.selectType == 1){
					arr.push(this.coinsMap[key])
				}else{
					if(this.coinsMap[this.consume.name].exchangeMap[key]){
						arr.push(this.coinsMap[key])
					}
				}
			}

			arr.sort((a, b) => {
				return a.id - b.id
			})

			return arr
		}
	},
	methods:{
		initRaito(){
			if(this.selectType == 1){
				this.radio = this.consume.name
				this.anotherRadio = this.gain.name
			}else{
				this.radio = this.gain.name
				this.anotherRadio = this.consume.name
			}
		},
		onClickLeft(){
			this.$emit('close')
		},
		clickCell(item){
			this.radio = item.name

			let info = {}
			if(this.selectType == 1){
				info.consume = this.coinsMap[this.radio]

				let itemInfo = this.showMap.find(item => item.name === this.radio)
				if(itemInfo.exchangeMap[this.anotherRadio]){
					info.gain = this.coinsMap[this.anotherRadio]
				}else{
					let anotherList = []
					for(let key in itemInfo.exchangeMap){
						anotherList.push(this.coinsMap[key])
					}
					this.anotherRadio = anotherList.sort((a, b) => a.id - b.id)[0].name
					info.gain = this.coinsMap[this.anotherRadio]
				}
			}else{
				info.gain = this.coinsMap[this.radio]
				info.consume = this.coinsMap[this.anotherRadio]
			}
			this.$emit('criminal', info)
		}
	}
};
</script>

<style>
@import "./index.less";
</style>